import React, { useCallback, useEffect } from 'react'
import './Lyric.scss'
import LyricHead from './LyricHead/LyricHead'
import LyricMain from './LyricMain/LyricMain'
import { useSelector } from 'react-redux';
import { RootState } from '@/modules/RootState';

function Lyric() {
  const musicList = useSelector((state:RootState) => state.musicList);

  return (
    <div className="Lyric">
      <div className="Lyric2">
          <div className="Lyric5"></div>
          {/*  */}
          {Object.keys(musicList.songDetail).length !== 0 ? (
            <div className="Lyric4" style={{ backgroundImage: `url(${musicList.songDetail.al.picUrl})` }}></div>
          ) : (
            <div className="Lyric4" style={{ backgroundImage: 'url(src/assets/王冰冰.jpg)' }}></div>
          )}
      </div>
      <div className="Lyric3">
          <LyricHead></LyricHead>
          <LyricMain></LyricMain>
      </div>
    </div>
  )
}

export default React.memo(Lyric)